import {createRouter,createWebHashHistory,createWebHistory} from 'vue-router'
// 1. 定义路由组件.
// 也可以从其他文件导入
// import Home from '../Views/Home.vue'//从views文件夹导入来使用
import About from '../Views/About.vue'
import User from '../Views/User.vue'
import NotFound from '../Views/NotFound.vue'
import Parent from '../Views/Parent.vue'
import Styleone from '../Views/Styleone.vue'
import Styletwo from '../Views/Styletwo.vue'
import Page from '../Views/Page.vue'
import ShopTop from '../Views/ShopTop.vue'
import ShopFooter from '../Views/ShopFooter.vue'
import ShopMain from '../Views/ShopMain.vue'

//路由懒加载
const Home = () => import('../Views/Home.vue')



// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
// 我们后面再讨论嵌套路由。
const routes = [
  { path: '/home', redirect:'/'},//redirect重定向
  { path: '/', component: Home },
  { path: '/about', component: About },
  { name:'use',
    path: '/user/:id(\\d+)', component: User, props: true,
    beforeEnter(to, from, next) {//每个入口的守卫
      console.log(to);
      console.log(from);
      next()
    },
  },//可以开发中使用动态字符串拼接,正则表达式匹配后面只能是数字
  { path: '/page', component: Page },
  { path: '/:path(.*)', component: NotFound },//这里使用正则表达式，如果上面匹配不到就会匹配这里找不到页面的提示
  {
    path: '/parent',
    alias:'/father',//起别名
    component: Parent,
    children: [{
      path: 'styleone',
      component:Styleone
    },
      {
        path: 'styletwo',
        component:Styletwo
    }]
  },
  { path: '/shop/:id', components: {default:ShopMain,ShopTop,ShopFooter},props:{default:true,ShopTop:false,ShopFooter:false} },


]

// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置，但我们在这里
// 暂时保持简单
const router = createRouter({
  // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
  history: createWebHistory(),//哈希模式和html5不一样的地方在于哈希url带#号
  routes, // `routes: routes` 的缩写
})

//全局守卫
router.beforeEach((to, from, next) => {
    console.log(to);
  console.log(from);
  next()//通行证
});
export default router//暴露出去